<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for,v-if</title>
    <style>
       .remove{
           text-decoration: line-through;
           color:#666;
           background-color: white;
       } 
       .noBorder{
           border:none;
       }
    </style>
</head>
<body>
    <div id="app1">	
        <h3>
            任务总数：{{todolist.length}},未完成数量：{{todolist.filter(item=>!item.isFinished).length}}
            <input type="button" value="删除已完成的任务" @click="removeTodo" >
        </h3>
        <ul>
            <li v-for="item in todolist">
               <input type="checkbox" v-model="item.isFinished" >
               <input 
                    type="text"
                    class="noBorder"
                    :class="{remove:item.isFinished}" 
                    :disabled="item.isFinished"
                    v-model="item.desc" >
            </li>
        </ul>
        <input type="text" v-model="newdesc" @input="changeMsg" >
        <input type="button" value="添加" @click="addTodo" >   
        <div v-show="msg!=''">{{msg}}</div>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
// 功能分析：
// 1、显示【已ok】
// 2、添加任务【已ok】
// 3、修改任务【已ok】
// 4、删除已完成的任务【已ok】
// 5、选中（修改任务的状态）【已ok】
// 6、任务总数，未完成数量【已ok】

let vm = new Vue({
    el:"#app1",
    data:{
        msg:"",
        newdesc:"",
        todolist:[
            {             
                isFinished:false,
                desc: "写HTML",
            },
            {
                isFinished:false,
                desc: "写CSS"
            },
            {
                isFinished:false,
                desc: "写JS"
            },
            {
                isFinished:false,
                desc: "写VUE"
            }
        ]
    },
    methods:{
        changeMsg(e){
            if(this.newdesc!==""){
                this.msg="";
            }
        },
        addTodo(){
            if(this.newdesc==""){
                this.msg="亲，请输入任务名";
                return;
            }
            this.todolist.push({
                isFinished:false,
                desc:this.newdesc
            })
            this.newdesc="";
        },
        removeTodo(){
            if(confirm("亲，您真的要删除吗？")){
                this.todolist = this.todolist.filter(item=>!item.isFinished);
            }
            
        }
    }
});


</script>